<template>
	<view class="content" >
    <scroll-view class="scroll" scroll-x="true">
      <view class="scroll-item" v-for="(item,index) in 7" :key="index" @click="current=index">
        <image class="img" :class="{active:index==current}" :src="`/static/bg-${index}.webp`" mode=""></image>
      </view>
    </scroll-view>
		<hx-sphere-viewer class="scene" :scene="scene" @sceneClick="click"/> 
    
	</view>
</template>

<script>
	export default {
		data() {
			return {
        current: 0,
			}
		},
		computed:{
      scene(){
        return {
          panorama: `/static/bg-${this.current}.webp`,
          markers: this.getMarkers(10),
        }
      }
    },
		methods: {
      /**
       * 获取标记
       * @ @param {Number} num 标记数量
       */
      getMarkers(num=4){
        let res = Array(num).fill(0)
        return res.map((item,id)=>{
          return {
            id:String(id),
            longitude: Math.random()*(Math.random()>0.5?1.5:-1.5),
            latitude: Math.random()*(Math.random()>0.5?1.5:-1.5),
            image: '/static/pin-blue.png',
            width: 32,
            height: 32,
          }
        })
      },
      /**
       * 点击事件
       * @param {Object} e
       */
      click(e){
        console.log(e);
        let {name, detail} = e
        if(name=='markerClick') uni.showToast({
          title: `您点击了标记${detail.id}`,
          icon: 'none'
        })
      }
		}
	}
</script>

<style lang="scss">
  .content{
    .scene{
      position: absolute;
      height: 100vh;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
    .scroll{
      position: fixed;
      bottom: 160rpx;
      width: 100%;
      height: 220rpx;
      white-space: nowrap;
      z-index: 100;
      
      .scroll-item{
        display: inline-block;
        width: 330rpx;
        height: 100%;
        margin-right: 20rpx;
        
        &:first-child{
          margin-left: 20rpx;
        }
        .img{
          width: 100%;
          height: 100%;
          border-radius: 12rpx;
          box-sizing: border-box;
          &.active{
            border: 2rpx solid $uni-color-primary;
          }
        }
        
      }
      
      
      
    }
  }
  
  
  
</style>
